<template>
	<div class="category">
		<div class="search border-1px"
			@click="goSea()"
		>
			<p><i class="iconfont">&#xe620;</i>请输入搜索内容</p>
		</div>
		<div class="content">
			<div class="c-left borderight-1px"
				ref="cateWrapper"
			>
				<ul>
					<li v-for="(goods, index) in goodsList"
						:class="{'active': currentIndex===index}"
						@click="selectGoods(index,$event)"
						ref="cateList"
					><p>{{goods.title}}</p></li>
				</ul>
			</div>
			<div class="c-right"
				ref="goodsWrapper"
			>
				<ul class="c-right-content">
					<li class="c-right-item"
						v-for="(goods, index) in goodsList"
						ref="goodsList"
					>
						<div class="header">
							<p class="title">{{goods.title}}</p>
							<p class="more" @click="goPro(goods.title,goods.id)">查看更多</p>
						</div>
						<ul class="good-items border-1px">
							<li v-for="(good, index) in goods.category"
								class="good-item"
								 @click="goPro(good.title,good.pid)" 
							>
								<img :src="good.image" 
									lazy="loaded"
								/>
								<p>{{good.title}}</p>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
		<BotNav :cateindex=1 v-if="isLoadDom"></BotNav>
	</div>
</template>
<script>
	import axios from 'axios'
	import Http from '../http.js'
	import BotNav from '../components/BotNav.vue'
	import BScroll from 'better-scroll'
	const options = {
		scrollY: true
	};
	const ERR_OK = 0;
	export default{
		components: {
			BotNav
		},
		data(){
			return{
				catesList: [],
				goodsList: [],
				listHeight: [],
				scrollY: 0,
				clickEvent: false,
				nindex: 99,
				uindex: 1,
				isLoadDom: false
			}
		},
		computed: {
			currentIndex(){
				for (let i = 0; i < this.listHeight.length; i++) {
					let height1 = this.listHeight[i];
					let height2 = this.listHeight[i + 1];
					if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
						this._followScroll(i);
						return i;	
					}else if(this.listHeight.length == 0){
						return i+99;
					}
				}
				return 0;
			},
		},
		created(){
			axios.get(Http.CLASSIFYLIST).then( res => {
				var ret = res.data;
				this.goodsList = ret['data'];
				this.$nextTick(() => {
		            this._initScroll();
		            this._calculateHeight();
		        });	
			})	
		},
		updated(){
			this.isLoadDom = true;
		},
		methods: {
			goPro: function(keyword,id){
				this.$router.push('/search/product/' + keyword + '/' + id)
			},
			goSea: function(){
				this.$router.push('search')
			},
			selectGoods(index, event) {
				this.clickEvent = true;
				if (!event._constructed) {
					return;
				} //取消网页版的时候点击一下，出现两次效果
				let goodsList = this.$refs.goodsList;
				let el = goodsList[index];
				this.goodsScroll.scrollToElement(el, 300);
			},
			_initScroll() {
				this.cateScroll = new BScroll(this.$refs.cateWrapper, {
					click: true  //better-scroll默认取消了点击，加这个激活点击
				});
				this.goodsScroll = new BScroll(this.$refs.goodsWrapper, {
					click: true,
					probeType: 3
				});
				this.goodsScroll.on('scroll', (pos) => {
					// 判断滑动方向，避免下拉时分类高亮错误（如第一分类商品数量为1时，下拉使得第二分类高亮）
					if (pos.y <= 0) {
						this.scrollY = Math.abs(Math.round(pos.y));
					}
				});
			},
			_calculateHeight() {
				let goodsList = this.$refs.goodsList;
				let height = 0;
				this.listHeight.push(height);
				let len = goodsList.length;
				for (let i = 0; i < len; i++) {
					let item = goodsList[i];
					height += item.clientHeight;
					this.listHeight.push(height);
				}
			},
			_followScroll(index) {
				let cateList = this.$refs.cateList;
				let el = cateList[index];
				this.cateScroll.scrollToElement(el, 300, 0, -100);
			},
		}
	}
</script>
<style lang="scss" scoped>
	.category{
		width: 100%;
		background: #fff;
		touch-action: none;
		.search{
			width: 100%;
			height: 0.7rem;
			padding-top: 0.1rem;
			font-size: 0.26rem;
			p{
				margin: 0.1rem 0.24rem;
				margin-top: 0;
				height: 0.6rem;
				line-height: 0.6rem;
				border-radius: 0.1rem;
				background: #f5f5f5;
			}
		}
		.content{
			position: absolute;
			top: 0.8rem;
			bottom: 1rem;
			overflow: hidden;
			display: flex;
			width: 100%;
			.c-left{
				flex: 0 0 25%;
				ul{
					li{
						padding: 0.3rem 0;
						height: 0.8rem;
						line-height: 0.8rem;
						font-size: 0.28rem;
						background: #f0eff5;
						&.active{
							background: #fff;
							p{
								// color: $color;
								font-weight: 700;
							}
							
						}
					}
				}
			}
			.c-right{
				flex: 1;
				.c-right-content{
					.c-right-item{
						padding: 0.24rem;
						padding-top: 0;
						padding-bottom: 0;
						.header{
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 0.88rem;
							line-height: 0.88rem;
							font-size: 0.24rem;
							.more{
								height: 0.88rem;
								color: rgb(255,101,68);
							}
						}
						.good-items{
							display: flex;
							flex-wrap: wrap;
							margin-top: 0.3rem;
							.good-item{
								flex: 0 0 33.33%;
								margin-bottom: 0.3rem;
								img{
									margin-bottom: 0.2rem;
									width: 0.88rem;
								}
								img[lazy='loaded']{
									width: 0.88rem;
									opacity: 0;
									animation-name: fadein;
									animation-duration: 1s;
									animation-iteration-count: 1;
									animation-fill-mode: forwards;
									animation-direction: normal;
									animation-timing-function: ease-in-out;
								    @keyframes fadein {
					                    0% {
					                        transform: scaleX(0.8);
					                        opacity: 0;
					                    }
					                    100% {
					                        transform: scaleX(1);
					                        opacity: 1;
					                    }
					                }
								}
								p{
									font-size: 0.24rem;
									color: #999;
								}
							}
						}
					}
				}
				
			}
		}
	}
</style>